<html>
<head>
    <meta charset="UTF-8">

    <meta name="robots" content="noindex,nofollow">
    <meta name="googlebot" content="noimageindex">

    <meta name="copyright" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">
    <meta name="format-detection" content="email=no">

    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>阿福易购-手机注册</title>

    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../css/public/tip.css">
    <link rel="stylesheet" href="../../css/bootstrap/css/bootstrap.min.css">

    <style>
        body { background-color: #ececec;}

        .top-tit { background:url(../../images/logo-m.png) center 0 no-repeat;width: 100%;height: 120px;padding: 10px 0;color:#fff;font-size: 16px;z-index: 10;position: relative;}
        .blur-box { width: 100%;height: 70px;background-color: #121e42;position: absolute;bottom:0;left: 0;z-index: 2;}

        .main-box { width: 320px; margin: 0 auto;}
        .main-box form { margin: 20px 10px; }
        .form-control { background-color: #fff; border-radius: 0;padding: 12px;height: auto;}
        .submit { width: 100%;padding: 8px 0;font-size: 20px;}

        .ck-code .form-control{ width: 160px;float: left;}
        .ck-code .btn { width: 130px;float: right;border-radius: 0;padding: 12px 0;}

        .password .form-control{ padding-right: 68px;margin-right: -60px;float:left;}
        .password .btn { padding: 9px 14px;margin-top: 3px;border-color:#fff;background-color: #ededed;}
        .password .btn:hover { background-color: #e1e1e1;}
    </style>

</head>
<body>
<div class="fn-rel">
    <div class="blur-box"></div>
    <div class="top-tit "></div>
</div>

<div class="main-box">


    <form class="js-form" novalidate>
        <div class="form-group">
            <label class="sr-only" for="mobile">手机号码</label>
            <input id="mobile" type="text" class="form-control" placeholder="请输入手机号码" required autofocus>
        </div>
        <div class="form-group ck-code clearfix">
            <label class="sr-only" for="code2">验证码</label>
            <input id="code2" type="text" class="form-control" placeholder="请输入验证码" required>

            <div class="fn-fr">
                <a class="chk-code" href="#"><img src="{{ URL('captcha/0.1') }}" width="130" height="46" alt="" id="chkCode" onclick="javascript:re_captcha();"></a>
            </div>
        </div>
        <div class="form-group ck-code clearfix">
            <label class="sr-only" for="code">短信验证码</label>
            <input id="code" type="text" class="form-control" placeholder="短信验证码" required>

            <div class="col-sm-4">
                <button id="btn-code" class="btn btn-default disabled" type="button" disabled>获取验证码</button>
            </div>
        </div>
        <div class="form-group password fn-rel">
            <label class="sr-only" for="password">密码</label>
            <input id="password"  type="password" class="form-control"  name="password" placeholder="密码：6到20个字符" required>
            <button id="btn-pwd" class="btn btn-default js-hide" type="button">显示</button>
        </div>
        <button id="submitBtn" type="submit" class="btn btn-info submit">立即注册</button>

        <div class="checkbox">
            <label>
                <input id="agree" type="checkbox" name="agree" checked="checked">
                我同意 <a href="http://www.afuyigou.com/help/agreement" class="f-hl" target="_blank">" 服务条款 "</a>
            </label>
        </div>
    </form>

</div>
<!--<div class="fn-rgba fn-fix"></div>-->


<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../js/base.global.js"></script>
<script src="../../js/tools.js"></script>


<script>
    var $form = $(".js-form"),
            $codeBtn = $("#btn-code"),
            $pwdBtn = $("#btn-pwd"),
            $mobileIpt = $('#mobile'),
            $codeIpt = $('#code'),
            $code2Ipt = $('#code2'),
            $pwdInput = $('#password'),
            $agreeIpt= $("#agree"),
            $submitBtn=$('#submitBtn');

    //手机验证
    $mobileIpt.on('input',function(){
                var isOk = ckMobile($mobileIpt);

                if(!$codeBtn.hasClass('is-countDown')){
                    $codeBtn.attr('disabled',!isOk);
                    $codeBtn.toggleClass('disabled',!isOk);
                }
            })
            .on('focus',function(){
                $mobileIpt.closest('.form-group').removeClass('has-error');
            })
            .on('blur',function(){
                var isOk = ckMobile($mobileIpt);

                $mobileIpt.closest('.form-group').toggleClass('has-error',!isOk);
            });

    //密码验证
    $pwdInput.on('focus',function(){
                $pwdInput.closest('.form-group').removeClass('has-error');
            })
            .on('blur',function(){
                var isOk = ckPwd($pwdInput);

                $pwdInput.closest('.form-group').toggleClass('has-error',!isOk);
            });


    $pwdBtn.on('click',function(){
        //if($pwdInput.val()=='') return false;

        if($pwdBtn.hasClass('js-hide')){
            $pwdBtn.removeClass('js-hide').text('隐藏');
            $pwdInput.attr('type','text');
        }else{
            $pwdBtn.addClass('js-hide').text('显示');
            $pwdInput.attr('type','password');
        }
    });

    //获取验证码
    $codeBtn.on('click',function(){
        if($codeBtn.prop('disabled')) return false;

        var that=$(this),sNum=60000,countDown;
        var phone = $mobileIpt.val();
        var send = true;

        if(!ckMobile($mobileIpt)){
            $mobileIpt.focus();
            return;
        }
        if(!ckCode($code2Ipt)){
            $code2Ipt.focus();
            return;
        }

        $.ajax({
         url:"{{ URL('user/sms') }}"+ "?t=" + Math.random(),
         data:{phone:phone,
               send:send,
               chkCode:$code2Ipt.val()
               },
         type:'post',
         dataType:'json',
         success:function(res){
            if(res.status==0){
                showMsg(res.message);
                re_captcha();
            }else{
                $codeBtn.addClass('is-countDown');
                    countDown=tools.buttonCountdown(that,sNum,'s','后可重发',function(){
                    $codeBtn.removeClass('is-countDown');
                });
            }

         },
         error:function(e){
             that.removeClass('disabled');
             showMsg(e.responseJSON.phone[0]);
             }
         })
    });

    //服务条款
    $agreeIpt.on('input change',function(){
        $submitBtn.prop('disabled',!$agreeIpt.prop('checked'));
    });


    //表单提交
    $form.on('submit',function (e) {
        e.preventDefault();

        $submitBtn.prop('disabled',true);


        if(!ckMobile($mobileIpt)){
            $mobileIpt.focus();
            showMsg('请填写正确的手机号');

            return false;
        }

        if(!ckCode($codeIpt)){
            $codeIpt.focus();
            showMsg('请填写短信验证码');

            return false;
        }


        if(!ckPwd($pwdInput)){
            $pwdInput.focus();
            showMsg('密码应为6到20个字符');

            return false;
        }

        //ajax注册
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '{{ URL('user/register') }}',
            data: {
                mobile: $mobileIpt.val(),
                chkCode:$code2Ipt.val(),
                code: $codeIpt.val(),
                password: $pwdInput.val(),
                product: $("#product").val(),
                agree: "on"
            },
            success:function(res){
                tools.log(res,typeof res);
                if(res.status==1){
                    //todo 跳转到注册成功页
                    window.location.href='/user/regsuccess';
                }else{
                    $submitBtn.prop('disabled',false);
                    showMsg(res.message);
                    re_captcha();
                }
            },
            error:function(e) {
                $submitBtn.prop('disabled',false);
                re_captcha();

                if(e.responseJSON){
                    for(var i in e.responseJSON){
                        var curInput=$('[name="'+i+'"]');

                        if(curInput.length){
                            showMsg(e.responseJSON[i][0]);
                            curInput.focus();
                        }
                    }
                }
            }
        });

    });


    function ckMobile(jqInput){
        var mobile = /^1[3|4|5|7|8]\d{9}$/;
        var isRequired=jqInput.prop('required');
        var val =jqInput.val();


        return (isRequired&&val.length) && (mobile.test(val));
    }

    function ckCode(jqInput){
        var isRequired=jqInput.prop('required');
        var val =jqInput.val();


        return (isRequired&&val.length);
    }

    function ckPwd(jqInput){
        var pwd=/^[^\s]{6,20}$/;
        var isRequired=jqInput.prop('required');
        var val =jqInput.val();


        return (isRequired&&val.length) && (pwd.test(val));
    }

    function showMsg(msg){
        if(!msg||msg.length==0) return false;

        $('body').notify(msg,0,{
            autoHidden:true,
            delay:2500,
            posStyle:"top:-30px;margin-top:-20px;",
            callback:function(){
                $submitBtn.prop('disabled',false);
            }

        });
    }

    function re_captcha() {
        var $url = "{{ URL('captcha') }}" + "/" + Math.random();
        //var $url = "http://www.afuyigou.com/captcha" + "/" + Math.random();
        $('#chkCode').attr('src',$url);
    }
</script>

</body>
</html>